<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="set">set</button>
    <button id="get">get</button>
    <button id="remove">remove</button>
    <button id="clear">clear</button>
</body>
<script>
    //  web存储    (登录鉴权)
    // 三种方式
    // cookie：有时间限制 存储大小:几kb 
    // localStorage：没有时间限制，只要不手动清除,就一直存在  存储大小:几Mb
    // sessionStorage：没有时间限制，页面关闭后自动清除  存储大小:几Mb
</script>
<script>
    // localStorage和sessionStorage存储方式一样
    // 存数据  setItem(key,value) value只能是基本类型
    document.getElementById('set').onclick=function() {
        // console.log(11);
        localStorage.setItem(key1,value1)
        localStoeage.setItem(ket2,value2)
    }

    // 取数据  getItem(key)
    document.getElementById('get').onclick=function(){
        localStorage.getItem('key1')
        // 通过索引获取key 
        console.log(localStorage.key(1));
    }

    // 移除数据 removeItem(key)
    document.getElementById('remove').onclick=function(){
        localStorage.removeItem(key1)
    }

    // 清除数据 clear()
    document.getElementById('clear').onclick=function(){
        localStorage.clear()
    }
</script>
</html>